<template>
	<view class="fullPage">
		<map id="map" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="list" :show-location="true"
			@markertap="markertap" @regionchange="dragMap" @click="mapTap" style="width: 100vw;height: 100vh">
		</map>
		<!-- 小程序公告 -->
		<view class="noticeBarClass">
			<view style="width: 100%;">
				<u-notice-bar :show="noticeBarShow" mode="horizontal" :is-circular="true" :list="noticeBarList"
					:more-icon="true" font-size="35" :speed="noticeBarObj.timer ? 375/noticeBarObj.timer : 190"
					color="#ff0000"></u-notice-bar>
			</view>
		</view>
		<!-- 实名认证 -->
		<view class="certification" v-if="!is_autonym" @click="goTorz">
			<image class="icon_jg" mode="widthFix" src="/static/jinggao_icon.png"></image>
			<text class="text_1">您还未认证</text>
			<text class="text_2">点击立即认证</text>
		</view>

		<!-- 逾期订单提醒 -->
		<view class="certification certification_" v-if="is_overdue"
			@click.stop="routerLink({path: '/pages/user/myOrder/overdueOrder'},true)">
			<image class="icon_jg" mode="widthFix" src="/static/jinggao_icon.png"></image>
			<text class="text_1">您有逾期订单</text>
			<text class="text_2">点击立即查看</text>
		</view>

		<!-- 逾期套餐模态框 -->
		<view @click="lastOrderFn" v-if="depositInfo!==0&&is_autonym&&isOverdueList"
			:class="noticeBarShow?'lastOrderclass':'lastOrdercla'">
			<view class="comboTitle" style="text-align: center;margin-bottom: 5px;">
				当前电池电量
			</view>
			<view class="comboCenter">
				<progress :percent="overdueList.electric" :stroke-width="16" :font-size="14" :border-radius="16"
					:show-info="true" :active="true" color="#4cb32c" backgroundColor="#3e3838" />
			</view>
			<view class="comboFooter"
				style="display: flex;justify-content: space-between;align-items: center;margin-top: 5px;">
				<view class="comboFooterLeft">
					<view class="">套餐剩余天数</view>
					<view
						:class="overdueList.tag&&overdueList.pastNumber&&overdueList.pastNumber<=1 || !overdueList.tag ?'red': ''"
						style="font-weight: 700;text-align: center;"><text v-if="!overdueList.tag">已过期</text>
						{{overdueList.pastNumber}}天
					</view>
				</view>
				<view class="comboFooterRight">
					<view class="" style="text-align: right;">套餐有效期</view>
					<view class="">{{overdueList.validityTime}}</view>
				</view>
			</view>
		</view>


		<!-- 右侧的功能按钮 -->
		<view class="aside_r" v-if="!markerInfoShow">
			<!-- 优惠券 -->
			<view v-if="CollectingCoupons" class="mb30 flex_aj h110 bf itemImg  shadow moneyBao1"
				@tap="discountCouponFn">
				<view style="font-size: 30rpx;">领劵</view>
			</view>
			<!-- 用户指南 -->
			<view class="mb30 flex_aj h110 bf itemImg  shadow moneyBao1" @tap="getUserShow">
				<view style="font-size: 30rpx;">用户</view>
				<view style="font-size: 30rpx;">指南</view>
			</view>
			<!-- 客服 -->
			<view class="mb30 flex_aj h110 bf itemImg  shadow moneyBao1" @tap="showSelPhoneFn">
				<!-- <view class="money">客服</view> -->
				<image src="/static/ic_phone.png" mode="widthFix" style="width: 70upx;height: 70upx;">
				</image>
			</view>
			<view class="w120 h120 mb30 dianchi">
				<!-- 我的电池 -->
				<view class="flex_aj w120 h120 bf border-r50p shadow" @click.stop="batteryFn">
					<image src="/static/dianchi.png" mode="widthFix" style="width: 66upx;height: 50upx;">
					</image>
				</view>
			</view>
			<!-- 地图按钮重置 -->
			<view class="flex_aj w120 h120 bf border-r50p border-r50p shadow" @click.stop="reset">
				<image src="/static/ic_sx.png" mode="widthFix" style="width: 70upx;height: 70upx;">
				</image>
			</view>
		</view>

		<!-- 底部tabBar start -->
		<view class="tabBar" v-if="!markerInfoShow">
			<!-- 扫一扫 -->
			<view class="tabBar_scan flex_aj column" @click.stop="scanCode">
				<image src="/static/ic_sys_2x.png" mode="widthFix" style="width: 128upx;height: 128upx;">
				</image>
				<view class="c9">
					扫一扫
				</view>
			</view>

			<view class="tabBar_c flex_sb">
				<view class="flex_a">
					<view class="tabBar_item flex_aj column">
						<image src="/static/ic_home_02.png" mode="widthFix" style="width: 40upx;height: 44upx;">
						</image>
						<view class="h50 lh50 ft24 c9">首页</view>
					</view>
					<view class="tabBar_item flex_aj column" @click="changeRecordFn">
						<image src="/static/ic_jxz.png" mode="widthFix" style="width: 44upx;height: 44upx;">
						</image>
						<view class="h50 lh50 ft24 c9">换电记录</view>
					</view>
				</view>

				<view class="flex_a">
					<view class="tabBar_item flex_aj column" @tap="routerLink({ path: '/pages/user/kefu/fault' })">
						<image src="/static/ic_kf.png" mode="widthFix" style="width: 40upx;height: 44upx;">
						</image>
						<view class="h50 lh50 ft24 c9">故障报修</view>
					</view>
					<view class="tabBar_item flex_aj column" @tap="routerLink({ path: '/pages/main/mine' })">
						<image src="/static/ic_center.png" mode="widthFix" style="width: 40upx;height: 44upx;">
						</image>
						<view class="h50 lh50 ft24 c9">我的</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 底部tabBar end -->

		<!-- 设备详情 start -->
		<view class="map_c p30 bf border-r1 shadow" v-if="markerInfoShow">
			<!-- 				<view v-if="markerInfo.deviceType == 3">
					<view>充电柜编号：{{ markerInfo.sn }}</view>
					<view class="h70 flex_a">
						<view class="flex1 pr24">{{ markerInfo.siteName }}</view>
						<view class="whn c9">{{ markerInfo.distance }}km</view>
					</view>
					<view class="h50">{{ markerInfo.operatorName }}</view>
					<view class="flex mb20 c9 lh40">
						<view class="flex_a w40 h30">
							<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 24upx;height: 30upx;">
							</image>
						</view>
						<view class="flex1">{{ markerInfo.address }}</view>
					</view>
					<view class="flex_sb h100 mb30 plr30 bgf5">
						<view class="flex_a">
							空闲仓位：
							<view class="green">{{ markerInfo.blankNum }}</view>
						</view>
						<view class="flex_a">
							总仓位：
							<view class="ft30">{{ markerInfo.chanelNum }}</view>
						</view>
					</view>
					<view class="h100 lh100 mb30 plr30 bgf5">
						收费标准：
						<view class="inlineB pl10 danger">
							{{ markerInfo.mealPrice }}元/{{ markerInfo.mealType == 1 ? '度' : '小时' }}
						</view>
					</view>

					<view class="h80 lh80 border-r6 b-primary tac cf tap" @click="navigation">立即导航</view>
				</view> -->
			<!-- 充电 end -->
			<!-- 租车 start -->
			<!-- <view v-if="markerInfo.deviceType == 2">
					<view class="h70 flex_a">
						<view class="flex1 pr24">{{ markerInfo.siteName }}</view>
						<view class="whn c9">{{ markerInfo.distance }}km</view>
					</view>
					<view class="h50">{{ markerInfo.operatorName }}</view>
					<view class="flex mb20 c9 lh40">
						<view class="flex_a w40 h30">
							<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 24upx;height: 30upx;">
							</image>
						</view>
						<view class="flex1">{{ markerInfo.address }}</view>
					</view>

					<view class="h100 lh100 mb30 plr30 bgf5 border-r1">
						可租车辆：
						<view class="inlineB green">{{ markerInfo.availableNum }} 辆</view>
					</view>
          
					<view class="flex_sb">
						<view class="flex1 h80 lh80 border-r6 b-primary tac cf tap" @click="navigation">立即导航
						</view>
					</view>
				</view> -->
			<!-- 租车 end -->
			<!-- 换电 start -->
			<view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="width: 520upx;">换电柜编号：{{ markerInfo.deviceNo }}</view>
					<view style="color: blue;width: 120upx;" @click="mapImgFn">查看图片</view>
				</view>
				<view class="h70 flex_a"
					style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
					<view class="flex mb20 c9 lh40">
						<view class="flex_a w40 h30">
							<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 24upx;height: 30upx;">
							</image>
						</view>
						<view class="flex1">{{ markerInfo.address }}</view>
					</view>
					<view class="whn c9">{{ markerInfo.distance }}km</view>
				</view>

				<view class="flex_sb h100 mb30 plr30 bgf5">
					<view class="flex_a">
						空闲仓位：
						<view class="green">{{ markerInfo.blankNum }}</view>
					</view>
					<view class="flex_a">
						可取仓位：
						<view class="warning">{{ markerInfo.availableNum }}</view>
					</view>
					<view class="flex_a">
						总仓位：
						<view class="ft30">{{ markerInfo.chanelNum }}</view>
					</view>
				</view>
				<view class="box_vt">
					<view class="bt_one" v-for="(item,index) in markerInfo.availableTypeMap" :key="index">
						<view class="one_item_1">{{item.typeVt}}V</view>
						<view class="one_item_2 green">可用{{ item.count || 0 }}</view>
					</view>
				</view>
				<view class="h80 lh80 mb30 border-r6 b-primary tac cf tap" @click="navigation">立即导航
				</view>
				<view class="flex_sb">
					<view class="flex1 h80 lh80 border-r6 b-warning tac cf tap"
						@click="routerLink({ path: '/pages/user/rentEle/package', query: { deviceId: markerInfo.id, type: 1 } })">
						租电套餐
					</view>
					<!-- <view class="flex1 h80 lh80 border-r6 b-green tac cf tap" @click="isShowBat = true">电池详情
						</view> -->
				</view>
				<!-- 换电 end -->
			</view>
		</view>
		<!-- 设备详情 end -->

		<!-- 电池详情 start -->
		<view class="bat_wrap flex_aj column" v-if="isShowBat">
			<view class="bat_content">
				<view class="table_th flex_a">
					<view class="flex1 tac">电池类型</view>
					<view class="flex1 tac">可取数量</view>
				</view>
				<view class="table_tr  flex_a" v-for="(item,index) in markerInfo.availableTypeMap" :key="index">
					<view class="flex1 tac">{{item.typeVt}}</view>
					<view class="flex1 tac">{{ item.count || 0 }}</view>
				</view>
				<!-- <view class="table_tr  flex_a">
						<view class="flex1 tac">DC60V</view>
						<view class="flex1 tac">{{ markerInfo.available_60 || 0 }}</view>
					</view>
					<view class="table_tr  flex_a">
						<view class="flex1 tac">DC72V</view>
						<view class="flex1 tac">{{ markerInfo.available_72 || 0 }}</view>
					</view> -->
			</view>
			<view class="bat_close flex_aj" @click="isShowBat = false">
				<image src="/static/ic_gb_2x.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 电池详情 end -->

		<!-- 新人红包弹窗 start -->
		<!-- <u-mask :show="isShowRedBag" class="hongbao">
			<view class="flex_aj pw100 ph100">
				<view class="cp_w">
					<view class="cp_img">
						<image src="/static/redBag_img.png" mode="widthFix" style="width: 654upx;height: 876upx;">
						</image>
					</view>
					<view class="cp_c cf">
						<view class="mb70 tac">
							<view class="cp_money mb30 tac">
								<text class="ft80">{{getGiveInfoList.giveMoney}}</text>
								<text class="ft36">元</text>
							</view>

							<view class="mb150 ft32">新用户专享红包</view>
							<view class="flex_aj">
								<text @click="goWallet">“我的钱包”</text>
								中查看
							</view>
						</view>

						<view class="flex_aj">
							<view class="close_btn flex_aj border-r50p cp_close" @click="closeRedBag">
								<u-icon name="close" color="#fff" size="32"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask> -->
		<!-- 新人红包弹窗 end -->

		<u-select v-model="showSelPhone" mode="mutil-column-auto" label-name="areaName" value-name="areaName"
			child-name="phoneArr" :list="phoneList" @confirm="confirmPhone"></u-select>
	</view>
</template>

<script>
	class Gps {
		//构造函数
		constructor(obj = {}) {
			let {
				longitude,
				latitude
			} = obj;
			if (longitude === undefined || latitude === undefined) {
				return console.error("经纬度参数不能为空!");
			}
			this.PI = 3.14159265358979324;
			return this.getCoordinate(longitude, latitude);
		};
		//纬度转换
		transformLatitude(x, y) {
			let num = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
			num += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
			num += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
			num += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
			return num;
		};
		//经度转换
		transformLongitude(x, y) {
			let num = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
			num += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
			num += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
			num += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
			return num;
		};
		// 坐标转换
		calculation(longitude, latitude) {
			let a = 6378245.0; // 卫星椭球坐标投影到平面地图坐标系的投影因子。
			let ee = 0.00669342162296594323; // 椭球的偏心率。
			let lat = this.transformLatitude(longitude - 105.0, latitude - 35.0);
			let lng = this.transformLongitude(longitude - 105.0, latitude - 35.0);
			let radLat = latitude / 180.0 * this.PI;
			let magic = Math.sin(radLat);
			magic = 1 - ee * magic * magic;
			let sqrtMagic = Math.sqrt(magic);
			lat = (lat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
			lng = (lng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
			return {
				'longitude': lng,
				'latitude': lat,
			};
		};
		// 判断是否为国外坐标
		isOutOfChina(longitude, latitude) {
			if (longitude < 72.004 || longitude > 137.8347) {
				return true;
			};
			if (latitude < 0.8293 || latitude > 55.8271) {
				return true;
			};
			return false;
		};
		// GPS坐标 转 高德坐标
		getCoordinate(longitude, latitude) {
			longitude = Number(longitude);
			latitude = Number(latitude);
			if (this.isOutOfChina(longitude, latitude)) {
				//国外
				return {
					"longitude": longitude,
					"latitude": latitude,
				}
			} else {
				//国内
				let obj = this.calculation(longitude, latitude);
				return {
					"longitude": longitude + obj.longitude,
					"latitude": latitude + obj.latitude,
				};
			}
		};
	}
	import * as markersMock from '@/utils/markers.js'
	import {
		mapMutations,
		mapState
	} from 'vuex'

	import {
		getService,
		mapList,
		getDeviceDetail,
		getUserInfo,
		isOverdue,
		userMealPastUserMeal,
		exchangeOrder,
		getBalance
	} from '@/api/user.js'
	import {
		getGiveInfo,
		getAutonymToken,
		getPlatformInfo,
		getPhone,
		protocolss
	} from '@/api/public.js'
	export default {
		name: 'index',
		data() {
			return {
				// 小程序公告
				noticeBarObj: {},
				noticeBarList: [
					'寒雨连江夜入吴 , 平明送客楚山孤',
					'洛阳亲友如相问', '一片冰心在玉壶'
				],
				noticeBarShow: false,
				isShowRedBag: false, // 是否显示新人红包
				getGiveInfoCode: '', //新人红包状态码
				getGiveInfoList: {}, //接收新人红包数组
				deviceNo: '',
				deviceType: 0,
				appId: '', //声明小程序的appid为空
				titless: '',
				activeTab: 3, // 1:换电柜 2：租车 3：充电柜
				tabList: [], // 头部tab栏
				activeBattery: 1, // 当前选中的电池型号
				batterySpec: [{
					name: 'DC48V',
					status: 1
				}, {
					name: 'DC60V',
					status: 2
				}, {
					name: 'DV72V',
					status: 3
				}], // 电池型号列表
				scale: 14, // 地图缩放比例
				latitude: 23.12652, //23.02067
				longitude: 113.25878, //113.75179  
				list: [], // 设备列表
				markerInfoShow: false, // 是否显示marker点详情
				markerInfo: {}, // marker点相亲
				isShowBat: false, // 是否显示电池详情
				isTapScan: false, // 是否可以正常扫码 （阻止用户同一时间点，多次点击）
				promotionId: '',
				mobile: [],
				is_autonym: true,
				is_overdue: false,
				phoneList: [],
				showSelPhone: false,
				multiSelector: [
					[1, 2, 3],
					[4, 5, 6]
				],
				agentId: '', //代理商id
				overdueList: {},
				isOverdueList: false,
				CollectingCoupons: false, //控制领劵按钮是否显示
				depositInfo: 0,

			}
		},
		onLoad(e) {
			// 让分享与分布朋友圈按钮能用
			uni.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		// 转发功能样式定制
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}

			return {
				title: this.titless, //分享的名称
				path: '/pages/main/map',
				// mpId: this.appId //此处配置微信小程序的AppId
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.titless,
				type: 0,
				summary: "",
			}
		},
		onLaunch(o) {},

		onShow() {
			console.log('f辅导费付付付付付付', this.$store.state.user);
			this.appId = my.getAppIdSync().appId //获取小程序的appid
			if (this.appId == '2021003194658130') {
				this.titless = '云禾换电'
			} else if (this.appId == '2021004106695849') {
				this.titless = '浩琪换电'
			} else if (this.appId == '2021004101645796') {
				this.titless = '小智换电'
			} else if (this.appId == '2021004123630128') {
				this.titless = '小熊唤电'
			} else if (this.appId == '2021004131634257') {
				this.titless = '领跑换电'
			} else {
				this.titless = '智能换电'
			}


			this.mapContext = my.createMapContext('map')
			this.agentId = uni.getStorageSync('oneData').agentId || ''
			if (this.agentId) { // 获取用户套餐
				if (this.$store.state.user.token) { //如果登录了才执行
					this.userMealPastUserMealFn()
					this.cashMoneyFn()
				}

			}
			if (this.$store.state.user.token) { //如果登录了才执行
				this.getUserInfo()
				this.getIsOverdue()
			}
			this.init()
			// 如果有代理商和登录了，就显示领劵，否则没有
			if (this.$store.state.user.token && this.agentId) {
				this.CollectingCoupons = true
			} else {
				this.CollectingCoupons = false
			}


			this.getLocation()
			setTimeout(() => {
				this.$store.commit('longitudess', this.longitude)
				this.$store.commit('latitudess', this.latitude)
			}, 1000)
			setTimeout(() => {
				this.$store.commit('longitudess', this.longitude)
				this.$store.commit('latitudess', this.latitude)
			}, 5000)
			setTimeout(() => {
				this.$store.commit('longitudess', this.longitude)
				this.$store.commit('latitudess', this.latitude)
			}, 10000)
			setTimeout(() => {
				this.$store.commit('longitudess', this.longitude)
				this.$store.commit('latitudess', this.latitude)
			}, 20000)
			setTimeout(() => {
				this.$store.commit('longitudess', this.longitude)
				this.$store.commit('latitudess', this.latitude)
			}, 50000)
			// 获取小程序公告内容
			this.protocol()
		},
		onHide() {
			this.macno = null
		},
		computed: {
			isLogin() {
				return this.$store.state.user.isLogin
			},
			token() {
				return this.$store.state.user.token
			},
			...mapState({
				tabbarstatus: state => state.tabbar.tabbarstatus,
				deviceTypes: state => state.tabbar.deviceTypes,
			})
		},

		methods: {
			// 跳转到换电柜图片
			mapImgFn() {
				if (!this.markerInfo.img) {
					this.toast('暂无图片')
					return
				}
				this.routerLink({
					path: '/pages/user/rentEle/mapImg',
					query: {
						img: this.markerInfo.img
					}
				})
			},

			showSelPhoneFn() {
				this.showSelPhone = true
			},
			// 获取押金信息
			async cashMoneyFn() {
				const res = await getBalance({
					agentId: this.agentId
				})

				this.depositInfo = res.data[0].deposit || 0
				console.log('押金金额', this.depositInfo);
			},

			// 获取用户套餐
			async userMealPastUserMealFn() {
				const userMeal = await userMealPastUserMeal(this.agentId)
				console.log('有代理商id', userMeal.data);
				if (userMeal.data) {
					this.overdueList = userMeal.data
					if (!this.overdueList.electric) {
						this.overdueList.electric = 0
					}
					this.isOverdueList = true
				} else {
					this.isOverdueList = false
				}
			},

			// 跳转最后一个订单页
			async lastOrderFn() {
				const res = await exchangeOrder({
					pageNum: 1,
					pageSize: 20
				})
				if (res.rows.length !== 0) {
					console.log('222', res.rows[0].orderNo);
					this.routerLink({
						path: '/pages/user/myOrder/rentEleDetail',
						query: {
							orderNo: res.rows[0].orderNo
						}
					})
				} else {
					this.toast('暂无订单')
				}

			},

			// 我的电池
			batteryFn() {
				uni.reLaunch({
					url: '/pages/user/center/myBattery'
				})
			}, // 换电记录
			changeRecordFn() {
				uni.reLaunch({
					url: '/pages/user/myOrder/index'
				})
			},

			// 获取小程序公告内容
			async protocol() {
				const res = await protocolss({
					type: 8,
					appType: 2
				})
				console.log('获取小程序公告内容', res);
				if (res.data) {
					this.noticeBarList = [res.data.title + '：' + res.data.content]
					this.noticeBarObj = res.data
					this.noticeBarShow = res.data.status === 1 ? true : false
				}
			},

			confirmPhone(e) {
				let phone = e[1].value
				this.getPhoneCall(phone)
			},
			async getPhoneInfo() {
				let res = await getPhone({
					appId: this.appId,
					type: 1
				})
				if (res.code === 200) {
					this.phoneList = res.data
					for (let i of this.phoneList) {
						i.phone = i.phone.split(',')
					}
					for (let i of this.phoneList) {
						i.phoneArr = []
						for (let j of i.phone) {
							i.phoneArr.push({
								areaName: j
							})
						}
					}
					console.log(this.phoneList)
				}
			},
			async getIsOverdue() {
				let res = await isOverdue()
				if (res.code === 200) {
					this.is_overdue = res.data.isOverdue
				}
			},
			// 实名认证
			goTorz() {
				if (!this.token) {
					uni.showToast({
						title: '请登录',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '请实名认证',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/user/webview/webview'
							})
						}
					}
				});
			},
			async getUserInfo() {
				let res = await getUserInfo()
				if (res.code === 200) {
					this.is_autonym = res.data.is_autonym
				}
			},
			// 领劵
			async discountCouponFn() {

				uni.reLaunch({
					url: '/pages/user/rentEle/userDiscountCoupon'
				})
				// this.routerLink({
				// 	path: '/pages/user/rentEle/userDiscountCoupon',
				// }, true)
			},

			// 用户指南
			getUserShow() {
				this.routerLink({
					path: '/pages/user/kefu/userguide',
					query: {
						type: 5
					}
				})
			},
			// 获取平台信息
			async getPlatformInfo() {
				const res = await getPlatformInfo({
					appId: this.appId
				})
				if (res.data) {
					this.mobile = res.data.serverTel.split(',')
				}


			},
			bindPickerChange(e) {
				console.log(e)
				this.getPhoneCall(e)
			},
			getPhoneCall(m) {
				console.log(m)
				this.confirm({
					title: '客服电话',
					content: '联系电话：' + m,
					confirmText: '拨打'
				}).then(res => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: m
						})
					}
				})
			},
			async init() {
				// await this.getService()

				this.getPlatformInfo()
				this.getPhoneInfo()
			},
			// 获取后端返回的数据，判断当前是充电桩或换电柜或租车
			async getService() {
				//调用接口，并用小程序的appid传参
				const res = await getService({
					appId: this.appId
					// appId: 'wxfbf1b787abe57fc8'
				})
				const service = res.data
				const _tabList = []

				// 运营换电  1：是 2：否
				if (service.operateHd == 1) {
					_tabList.push({
						name: '换电',
						status: 1
					})
				}
				this.tabList = _tabList
				this.activeTab = _tabList[0] ? _tabList[0].status : 0
			},

			// 选择电池规格
			// chooseBattery(status) {
			// 	if(this.activeBattery == status) {
			// 		return false
			// 	}
			// 	this.activeBattery = status
			// },

			//获取当前的地理位置(经纬度)
			async getLocation() {
				uni.getLocation({
					type: 1,
					success: (res) => {
						console.log('当前地理位置', res.latitude);
						var obj = new Gps({
							"latitude": res.latitude,
							"longitude": res.longitude
						});
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.getList()
					},
					fail: (res) => {
						my.alert({
							title: '定位失败',
							content: JSON.stringify(res)
						});
					},
				})



			},
			getList() {
				// 移除 marker
				this.mapContext.removeMarkers({
					markerIds: this.list.map(item => item.id)
				})

				this.list = []
				//将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。2.8.0 起支持将地图中心移动到指定位置
				this.mapContext.moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude
				})
				this.list[0] = {
					id: -1,
					latitude: this.latitude * 1,
					longitude: this.longitude * 1,
					iconPath: '/static/ic_dqdw_2x.png',
					width: 100,
					height: 100
				}
				// if (this.tabList.length > 0) {
				this.mapList()
				// }
				this.markersMock()
			},


			// 模拟数据
			markersMock() {
				let markers = []
				markersMock.markers.forEach((item, index) => {
					// let pi = (3.14159265358979324 * 3000.0) / 180.0;
					// let x = item.lng - 0.0065;
					// let y = item.lat - 0.006;
					// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
					// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
					// item.lng = z * Math.cos(theta);
					// item.lat = z * Math.sin(theta);
					markers.push({
						id: index,
						latitude: item.lat,
						longitude: item.lng,
						width: 42,
						height: 44,
						iconPath: '/static/ic_pos.png',
						title: '',
						anchor: {
							x: 0.5,
							y: 0.5
						}
					})
				})
				this.list = [...this.list, ...markers]
			},
			// 附近设备
			async mapList() {
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = this.longitude - 0.0065;
				// let y = this.latitude - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// this.longitude = z * Math.cos(theta);
				// this.latitude = z * Math.sin(theta);

				const res = await mapList({
					serviceType: 1,
					lat: this.latitude,
					lng: this.longitude,
					appId: this.appId,
					appType: 2
				})
				this.list = []
				res.data.forEach((item, index) => {
					const localInfo = {
						index: index,
						id: index,
						deviceId: item.id,
						latitude: item.lat * 1,
						longitude: item.lng * 1,
						width: 35,
						height: 45,
						iconPath: item.deviceStatus === 1 ?
							`/static/sb_${item.batteryNumber}.png` : '/static/lx_icon.png',
						anchor: {
							x: 0.5,
							y: 0.5
						},
					}
					// 百度转高德
					// let pi = 3.14159265358979324 * 3000.0 / 180.0;
					// let  x = Number(localInfo.longitude- 0.0065) 
					// let y = Number( localInfo.latitude- 0.006)
					// let z = Number(Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi))
					// let theta = Number(Math.atan2(y, x) - 0.000003 * Math.cos(x * pi))
					// localInfo.longitude  = Number(z * Math.cos(theta))
					// localInfo.latitude  = Number(z * Math.sin(theta))
					this.list.push(localInfo)
				})
				// this.markerInfo = this.list[1]
			},

			// 获取设备详情
			async getDeviceDetail(index) {
				console.log('点击1')
				const res = await getDeviceDetail({
					serviceType: 1,
					lat: this.latitude,
					lng: this.longitude,
					id: this.list[index].deviceId !== undefined ? this.list[index].deviceId : ""
				})
				console.log(res, 'res')

				res.data.index = index
				this.markerInfo = res.data
				if (res.data.deviceStatus === 2) {
					this.toast('该设备已离线，请选择其他设备')
					this.markerInfoShow = false
				} else {
					this.markerInfoShow = true
				}
			},

			markertap(e) {
				console.log('点击2', e)
				if (e.detail.markerId < 0) {
					return false
				}
				// this.markerInfoShow = true
				this.getDeviceDetail(Number(e.detail.markerId))
			},
			dragMap(e) {
				// 注意：支付宝小程序 如果缩小或者放大了地图比例尺以后，请在 onRegionChange 函数中重新设置 data 的
				// scale 值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小。
				// #ifdef MP-ALIPAY
				// console.log('1=1================', e)
				// console.log(e.scale)
				// this.scale = e.scale
				// // 获取当前地图中心的经纬度
				// this.mapContext.getCenterLocation({
				// 	success: res => {
				// 		console.log(res.longitude)
				// 		console.log(res.latitude)

				// 		this.latitude = res.latitude
				// 		this.longitude = res.longitude
				// 	},
				// 	fail: err => {
				// 		console.log(err)
				// 	}
				// })
				// #endif
				this.markerInfoShow = false
			},
			mapTap() {
				this.markerInfoShow = false
			},

			// 地图按钮方法
			async reset() {
				this.scale = 14
				this.mapContext.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude
				})
				this.getLocation()
			},

			// 扫一扫
			scanCode() {
				// 防抖
				if (this.isTapScan) {
					return false
				}
				this.isTapScan = true
				setTimeout(() => {
					this.isTapScan = false
				}, 2000)


				const _self = this
				// this.routerLink({}, true, () => {
				uni.scanCode({
					scanType: ['barCode', 'qrCode'], //扫码类型
					success(res) {
						if (res.errMsg == 'scanCode:ok') {
							let deviceNo = ''
							let deviceType = 0
							let promotionId = ''
							if (res.scanType == 'QR') { //扫的码是二维码类型
								// http://weixin.qq.com/r/test?deviceNo=131211&deviceType=1
								// deviceType设备类型 1:换电柜 2：租车 3：充电柜
								// 获取路由url的参数值
								deviceNo = _self.getUrlParam('deviceNo', res.result)
								deviceType = _self.getUrlParam('deviceType', res.result)
								promotionId = _self.getUrlParam('promotionId', res.result)
								// if (deviceType == 2 || deviceType == 1) {
								// 	_self.toast('请扫描正确的二维码,这不是充电柜的二维码！')
								// 	return false
								// }
								_self.$store.commit('scanCode', deviceType)
								_self.deviceNo = deviceNo
								_self.deviceType = deviceType
								_self.promotionId = promotionId

							}
							if (deviceNo) {
								// _self.getGiveInfo(deviceNo) // 调用// 获取新人红包  方法
								setTimeout(() => {
									if (!_self.getGiveInfoCode) {
										_self.goUsePage(deviceNo,
											deviceType) //// 调用 -- 跳转 设备使用页面  
									} else {
										_self.isShowRedBag = true
										// setTimeout(() => {
										// 	_self.isShowRedBag = false
										_self.goUsePage(deviceNo,
											deviceType) //// 调用 -- 跳转 设备使用页面  
										// }, 3000)

									}
								}, 1000)


							} else if (promotionId) {
								uni.navigateTo({
									url: '/pages/main/mine?id=' + _self.promotionId
								})
							} else {
								_self.toast('请扫描正确的二维码')
							}
						}
					},


					fail(err) {
						console.log(err)
					}
				})
				// })


			},
			// 获取新人红包  
			async getGiveInfo(deviceNo) {
				const res = await getGiveInfo({
					deviceNo: deviceNo
				})
				this.getGiveInfoCode = res.msg
				this.getGiveInfoList = res.data

			},
			// 跳转 我的钱包
			goWallet() {
				uni.redirectTo({
					url: '/pages/user/wallet/index'
				})
			},
			// 关闭红包弹窗
			closeRedBag() {
				this.isShowRedBag = false
				this.goUsePage(this.deviceNo, this.deviceType) //// 调用 -- 跳转 设备使用页面 
				// this.back()
			},
			// 跳转 设备使用页面
			goUsePage(deviceNo, deviceType) {
				// deviceType设备类型 1:换电柜 2：租车 3：充电柜
				let page = ''
				let query = {
					deviceNo,
					lat: this.latitude,
					lng: this.longitude
				}
				// 换电
				// page = '/pages/user/rentEle/index'
				// this.routerLink({
				// 	path: page,
				// 	query
				// }, true)
				uni.reLaunch({
					url: `/pages/user/rentEle/index?deviceNo=${deviceNo}&lat=${this.latitude}&lng=${this.longitude}`,
				});

			},

			navigation() {
				// let lng = this.markerInfo.lng
				// let lat = this.markerInfo.lat
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = lng - 0.0065;
				// let y = lat - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// lng = z * Math.cos(theta);
				// lat = z * Math.sin(theta);
				uni.openLocation({
					latitude: this.markerInfo.lat * 1,
					longitude: this.markerInfo.lng * 1,
					name: this.markerInfo.address,
					address: this.markerInfo.address,
					success: () => {
						this.markerInfoShow = false
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.inlineB {
		display: inline-block;
		vertical-align: middle;
		white-space: nowrap;
	}

	view {
		overflow: auto;
		white-space: normal;
	}

	.tab_w {
		position: fixed;
		top: 30upx;
		left: 26upx;
		width: 698upx;
		height: 100upx;
		padding: 10upx 14upx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 50upx;
		overflow: hidden;
		box-shadow: 0px 4px 18px 0px rgba(50, 130, 255, 0.24);
	}

	.aside_l {
		position: fixed;
		bottom: 330upx;
		left: 26upx;
		width: 160upx;
		height: 300upx;
		background: #ffffff;
		box-shadow: 0upx 4upx 18upx 0upx rgba(50, 130, 255, 0.24);
		border-radius: 20upx;
		overflow: hidden;
	}

	.aside_r {
		position: absolute;
		bottom: 260upx;
		right: 26upx;
		background-color: rgba(255, 255, 255, 0.01);
		z-index: 999;
	}

	// 底部tabbar
	.tabBar {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 210rpx;
		z-index: 9999;
		background: rgba(255, 255, 255, 0.01);

		.tabBar_scan {
			position: absolute;
			top: 0;
			left: 50%;
			z-index: 9999;
			transform: translateX(-50%);
			background: rgba(255, 255, 255, 0.01);
		}

		.tabBar_c {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150upx;
			padding: 20upx;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 1);
			box-shadow: 1upx -14upx 20upx 0upx rgba(50, 130, 255, 0.1);
			border-radius: 50upx 50upx 0upx 0upx;

			.tabBar_item {
				// flex: 1;
				width: 140upx;
			}
		}
	}

	.map_c {
		position: fixed;
		bottom: 60upx;
		left: 30upx;
		width: 690upx;
		box-sizing: border-box;
	}

	.bat_wrap {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba($color: #000000, $alpha: 0.4);

		.bat_content {
			width: 600upx;
			min-height: 462upx;
			padding: 40upx 30upx;
			margin-bottom: 30upx;
			background-color: #fff;
			border-radius: 10px;

			.table_th {
				height: 50upx;
				line-height: 50upx;
				background: #deeafd;
			}

			.table_tr {
				height: 60upx;
				line-height: 60upx;
				background: #f7faff;
			}
		}

		.bat_close {
			width: 60upx;
			height: 60upx;

			&:active {
				opacity: 0.8;
			}
		}
	}

	.hongbao {
		// z-index: 1000;
		position: absolute;
		top: 20%;
		bottom: 20%;
		left: 10px;

		.cp_w {
			position: relative;
			width: 654upx;
			height: 876upx;

			.cp_img {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
			}

			.cp_c {
				position: relative;
				z-index: 1;
				padding-top: 370upx;

				.cp_money {

					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #ffffff;
					// line-height: 206px;
					// text-shadow: 0px 4px 0px rgba(167, 7, 46, 0.45);
					background: linear-gradient(180deg, #fffdc9 0%, #ffdb6d 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.cp_close {
					background-color: red;
					width: 25px;
					height: 25px;
					line-height: 23px;
				}
			}
		}
	}

	.moneyBao1 {
		flex-direction: column;
		border-radius: 50%;
		// position: relative;
		padding: 4px;

		.money {
			position: relative;
			font-size: 32rpx;
		}

		.money_ {
			font-size: 22rpx;
		}

	}

	.itemImg {
		width: 114rpx;
	}

	.dianchi {
		border-radius: 50%;
	}

	.box_vt {
		padding-bottom: 20rpx;
		display: flex;
		justify-content: center;

		.bt_one {
			background-color: #ccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			margin-right: 20rpx;

			.one_item_1 {}

			.one_item_2 {
				font-size: 20rpx;
			}
		}
	}

	.noticeBarClass {
		background-color: #ffffff;
		padding: 0rpx 15rpx;
		position: absolute;
		top: 0rpx;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;

	}

	.certification {
		background-color: #ffffff;
		padding: 15rpx 10rpx;
		position: absolute;
		top: 78rpx;
		display: flex;
		align-items: center;
		width: 700rpx;
		left: 25rpx;

		.icon_jg {
			width: 36rpx;
			height: 36rpx;
		}

		.text_1 {
			margin-left: 15rpx;
		}

		.text_2 {
			margin-left: 15rpx;
			color: orangered;
		}
	}

	.lastOrdercla {
		width: 90vw;
		position: absolute;
		top: 2%;
		left: 5%;
		background-color: #fff;
		padding: 5px;
		box-shadow: 2upx 2upx 20upx 1upx #aaa;
		border-radius: 20upx;
		overflow: hidden;
	}

	.lastOrderclass {
		width: 90vw;
		position: absolute;
		top: 6%;
		left: 5%;
		background-color: #fff;
		padding: 5px;
		box-shadow: 2upx 2upx 20upx 1upx #aaa;
		border-radius: 20upx;
		overflow: hidden;
	}
</style>